<template>
    <div class="payIndex">
        <div class="main">
            <div style="height:40px;width: 100%;display: flex;justify-content: space-between">
                <img @click="goHome" style="cursor: pointer" width="178px" height="28px" src="http://120.77.241.102/images/static/jd-logo.png" />
                <span class="rightArea">
                    <span>{{username}}</span>
                    <span>我的订单</span>
                    <span>使用帮助</span>
                </span>
            </div>
            <div class="payPic">
                <span class="picLeft">
                    <img width="88px" height="88px" src="http://120.77.241.102/images/static/paypic.png" />
                    <span>
                        <div style="font-family: Microsoft Yahei;color: #333;font-size: 14px;line-height: 180%;">订单提交成功，请尽快付款！订单号：{{orderData.orderId}}</div>
                        <div style="font-weight:400;font-style:normal;">请您在 <font style="color: red">23时00分13秒</font> 内完成支付，否则订单会被自动取消</div>
                    </span>
                </span>
                <span style="display: flex;justify-content: center;align-items: center">应付金额<font style="font-size:18px;color:#e31613;padding: 5px">{{orderData.actualPay}}</font>元</span>
            </div>
            <div style="width: 100%;display: flex;justify-content: space-between">
                <img width="100%" src="http://120.77.241.102/images/static/jdbaitiao.png" />
            </div>
            <div class="weixinpay">
                <span><img width="26px" height="26px" src="http://120.77.241.102/images/static/pay-union.png">
                    <font>中国银联</font>
                </span>
                <span @click="goWeiXinPay"><img width="26px" height="26px" src="http://120.77.241.102/images/static/pay-weixin.png">
                    <font>微信支付</font>
                </span>
            </div>
            <div style="margin-top: 20px">
                <img width="100%" src="http://120.77.241.102/images/static/payfooter.png" />
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator'
    import { Action, Getter } from 'vuex-class'
    import logo from '@/components/common/images/logo.png'
    import { namespace } from 'vuex-class';
    import * as _ from 'lodash';
    import CustomerApiActions from '@/components/api/customer-api-actions';
    @Component({
        components: {}
    })
    export default class PayIndex extends Vue {
        public logo = logo;
        public username: any = "";
        public orderId: any = "";
        public orderData: any = {};
        public async created() {
            let loginUser: any = localStorage.getItem("loginUser");
            if (loginUser) {
                loginUser = JSON.parse(loginUser);
                this.username = loginUser.username;
            }
            let orderId: any = this.$route.query.orderId;
            let apiActions = new CustomerApiActions(this);
            let orders: any = await apiActions.getOrders({ pageInfo: { pageNum: 1, pageSize: 1 }, orderId: orderId });
            let orderList = orders.data.list;
            this.orderData = orderList[0];
        }
        //跳转到首页
        public goHome() {
            this.$router.push({ path: '/' });
        }
        public goWeiXinPay() {
            let orderId: any = this.orderData.orderId;
            this.$router.push({ path: '/weixinpay', query: { orderId: orderId } });
        }

    }
</script>
<style lang="less">
    .payIndex {
        width: 100%;
        height: 100%;
        background: url(//storage.360buyimg.com/pcashier/bg.jpg) no-repeat;
        background-position: 50%;
        background-position: top;
        display: flex;
        justify-content: center;

        .main {
            width: 60%;
            margin-top: 15px;
            display: flex;
            flex-direction: column;
            align-items: start;

            .jdLog {
                background-image: url(http://120.77.241.102/images/static/jd-logo.png);
                width: 50px;
                height: 28px;
            }

            .rightArea {
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    margin-left: 10px;
                    color: #666;
                    font-size: 12px;
                    cursor: pointer;
                }

                span:hover {
                    color: red;
                }
            }

            .payPic {
                display: flex;
                flex-direction: row;
                width: 100%;
                justify-content: space-between;

                .picLeft {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    margin-top: 20px;
                    margin-bottom: 20px;

                    span {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        margin-left: 20px;
                    }
                }
            }

            .weixinpay {
                width: 100%;
                background: red;
                height: 30px;
                margin-top: 20px;
                width: 100%;
                background: #fff;
                box-shadow: 0 6px 32px rgb(0 0 0 / 13%);
                padding: 30px 30px 30px 10px;
                box-sizing: border-box;
                display: flex;
                align-items: center;

                span {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    margin-left: 20px;

                    font {
                        margin-left: 10px;
                        font-size: 16px;
                        color: #666;
                        font-family: Microsoft Yahei;
                        vertical-align: middle;
                    }

                    font:hover {
                        color: red;
                    }
                }
            }
        }

    }
</style>